<section class="section" id="tabs">
  <h1 class="title">Tabs</h1>
  <hr>
  <div class="tabs">
    <ul>
      <li class="is-active">
        <a>Pictures</a>
      </li>
      <li>
        <a>Music</a>
      </li>
      <li>
        <a>Videos</a>
      </li>
      <li>
        <a>Documents</a>
      </li>
    </ul>
  </div>
  <br>
  <div class="tabs is-centered">
    <ul>
      <li class="is-active">
        <a>
          <span class="icon is-small"><i class="fa fa-image"></i></span>
          <span>Pictures</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon is-small"><i class="fa fa-music"></i></span>
          <span>Music</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon is-small"><i class="fa fa-film"></i></span>
          <span>Videos</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
          <span>Documents</span>
        </a>
      </li>
    </ul>
  </div>
  <br>
  <div class="tabs is-small">
    <ul>
      <li class="is-active">
        <a>Pictures</a>
      </li>
      <li>
        <a>Music</a>
      </li>
      <li>
        <a>Videos</a>
      </li>
      <li>
        <a>Documents</a>
      </li>
    </ul>
  </div>
  <br>
  <div class="tabs is-medium">
    <ul>
      <li class="is-active">
        <a>Pictures</a>
      </li>
      <li>
        <a>Music</a>
      </li>
      <li>
        <a>Videos</a>
      </li>
      <li>
        <a>Documents</a>
      </li>
    </ul>
  </div>
  <br>
  <div class="tabs is-large">
    <ul>
      <li class="is-active">
        <a>Pictures</a>
      </li>
      <li>
        <a>Music</a>
      </li>
      <li>
        <a>Videos</a>
      </li>
      <li>
        <a>Documents</a>
      </li>
    </ul>
  </div>
  <br>
  <div class="tabs is-boxed">
    <ul>
      <li class="is-active">
        <a>
          <span class="icon is-small"><i class="fa fa-image"></i></span>
          <span>Pictures</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon is-small"><i class="fa fa-music"></i></span>
          <span>Music</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon is-small"><i class="fa fa-film"></i></span>
          <span>Videos</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
          <span>Documents</span>
        </a>
      </li>
    </ul>
  </div>
  <br>
  <div class="tabs is-toggle">
    <ul>
      <li class="is-active">
        <a>
          <span class="icon is-small"><i class="fa fa-image"></i></span>
          <span>Pictures</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon is-small"><i class="fa fa-music"></i></span>
          <span>Music</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon is-small"><i class="fa fa-film"></i></span>
          <span>Videos</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
          <span>Documents</span>
        </a>
      </li>
    </ul>
  </div>
  <br>
  <div class="tabs is-fullwidth">
    <ul>
      <li>
        <a>
          <span class="icon"><i class="fa fa-angle-left"></i></span>
          <span>Left</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon"><i class="fa fa-angle-up"></i></span>
          <span>Up</span>
        </a>
      </li>
      <li>
        <a>
          <span>Right</span>
          <span class="icon"><i class="fa fa-angle-right"></i></span>
        </a>
      </li>
    </ul>
  </div>
  <br>
  <div class="tabs is-centered is-boxed">
    <ul>
      <li class="is-active">
        <a>
          <span class="icon is-small"><i class="fa fa-image"></i></span>
          <span>Pictures</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon is-small"><i class="fa fa-music"></i></span>
          <span>Music</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon is-small"><i class="fa fa-film"></i></span>
          <span>Videos</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
          <span>Documents</span>
        </a>
      </li>
    </ul>
  </div>
  <br>
  <div class="tabs is-toggle is-fullwidth is-large">
    <ul>
      <li class="is-active">
        <a>
          <span class="icon"><i class="fa fa-image"></i></span>
          <span>Pictures</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon"><i class="fa fa-music"></i></span>
          <span>Music</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon"><i class="fa fa-film"></i></span>
          <span>Videos</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon"><i class="fa fa-file-text-o"></i></span>
          <span>Documents</span>
        </a>
      </li>
    </ul>
  </div>
</section>
